<template>
  <div>
    <div v-if="$store.getters.currentUser?.userType != 1" style="font-size: 25px;text-align: center;">
      <span>ERROR：很抱歉，您的权限不足。</span>
    </div>


    <!-- 用户查询界面（需要判断权限） -->
    <div v-if="$store.getters.currentUser?.userType == 1">
      <div class="searchArea">
        <LoginInput class="margin-20" title="请输入想要查询的关键词" type="text" v-model="params.key" />
        <div class="btns">
          <LoginButton type="1" class="margin-10" title="用户名查询" @click="()=>{bySearchName();this.params.pageNum = 1}" />
          <LoginButton type="2" class="margin-10" title="注册时间查询" @click="()=>{bySearchRegistrationDate();this.params.pageNum = 1}" />
          <LoginButton class="margin-10" title="状态查询" @click="()=>{bySearchState();this.params.pageNum = 1}" />
        </div>
      </div>

      <table class="shadow">
        <thead>
          <tr>
            <td>编号</td>
            <td>头像</td>
            <td>用户名</td>
            <td>注册时间</td>
            <td>注册邮箱</td>
            <td>用户状态</td>
            <td>用户类型</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(u, index) in users" :key="index">
            <td>{{ index + (params.pageNum - 1) * params.pageSize +1}}</td>
            <td>
              <div class="imgBar">
                <img :src="u.userImg" alt="tx" height="50">
              </div>
            </td>
            <td>{{ u.userName }}</td>
            <td>{{ u.registrationDate }}</td>
            <td>{{ u.userEmail }}</td>
            <td :style="{'color': u.userState==0?'green':'brown'}">{{ u.userState == 0 ? '在线' : '离线' }}</td>
            <td :style="{'font-style': u.userType==1?'italic':'unset'}">{{ u.userType == 0 ? '普通用户' : '管理员' }}</td>
          </tr>
          <tr v-if="users?.length == 0">
            <td>....</td>
            <td>....</td>
            <td>.......</td>
            <td style="color: #b10c7a;">什么也没查到捏 <span style="color: #2151f1;">┑(￣Д ￣)┍</span></td>
            <td>....</td>
            <td>....</td>
            <td>....</td>
          </tr>
        </tbody>
      </table>
      <!--分页-->
      <div class="demo-pagination-block" style="margin-top: 10px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.pageNum"
          :page-sizes="[5, 10, 15, 20]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
  
</template>

<script>
/* import { UserState, UserType } from '../Enum.js' */
import LoginInput from './LoginInput.vue';
import LoginButton from './LoginButton.vue';
import request from '@/utils/request';


export default {
  name: 'UserSearch',
  components: {
    LoginInput,
    LoginButton,
  },
  data() {
    return {
      params: {
        key: "",
        pageNum:1,
        pageSize:5,
        searchType: 0
      },
      users: [],
      total:0

    }
  },
  created() {
   this.load();
   
  },

  methods:
  {
    load() {
     request.get("/api/start/all", {
        params: this.params
      }).then(res => {
        if (res.code === '0') {
          console.log(res)
          this.users = res.data.list;
          this.total=res.data.total;
        } else {
          console.log("出了一些神秘的问题");
        }
      },
      error => {
          console.log(error.message);
          this.$message({
            message: '连接错误',
            type: 'error'
          })
        })    
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      /* this.params.pageNum++ */
      this.findSearch()
      
    },
    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum;
      /* this.params.pageNum++ */
      this.findSearch()
    },
    bySearchName() {
      this.params.searchType = 1
      request.get("/api/start/search/name", {
        params: this.params
      }).then(
        res => {
          if (res.code === '0') {
            this.users = res.data.list;
            this.total = res.data.total
          } else {
            console.log("出了一些神秘的问题");
          }
        },
        error => {
          console.log(error.message);
          this.$message({
            message: '连接错误',
            type: 'error'
          })
        }
      )
    },
    bySearchRegistrationDate() {
      this.params.searchType = 2
      
      /* 用‘到’等字符来分割 以此形成时间区间进行查找 (如果没有包含‘到’等字符则为模糊查询 第二个字符串为undefind)*/
      let inputKey = this.params.key.split(/[到至，,]/)
      let frontkey = inputKey[0]
      let behindkey = inputKey.length > 1 ? inputKey[1] : undefined
      /* 传给后端的对象 */
      let key = {
        frontkey,
        behindkey,
        pageNum: this.params.pageNum,
        pageSize: this.params.pageSize,
      }
      console.log(key)

      request.get("/api/start/search/registrationDate", {params:key}).then(res => {
        if (res.code === '0') {
          this.users = res.data.list;
          this.total = res.data.total
        } else {
          console.log("出了一些神秘的问题");
        }
      },
      error => {
          console.log(error.message);
          this.$message({
            message: '连接错误',
            type: 'error'
          })
        })
    },
    bySearchState() {
      console.log("!");
      this.params.searchType = 3
      request.get("/api/start/search/state", {
        params: {
          key: this.params.key == "在线" ? 0 : this.params.key == "离线" ? 1 : 2,
          pageNum: this.params.pageNum,
          pageSize: this.params.pageSize,
        }
      }).then(res => {
        if (res.code === '0') {
          this.users = res.data.list;
          this.total = res.data.total
        } else {
          console.log("出了一些神秘的问题");
        }
      },
      error => {
          console.log(error.message);
          this.$message({
            message: '连接错误',
            type: 'error'
          })
        })
    },
    findSearch(){
      switch(this.params.searchType){
        case 0:
          this.load()
          break
        case 1:
          this.bySearchName();
          break
        case 2:
          this.bySearchRegistrationDate()
          break
        case 3:
          this.bySearchState()
          break
        default:
          break
      }
    }

  }

}
</script>

<style scoped>
.title {
  font-size: 40px;
  padding-top: 20px;
  font-weight: bold;
  color: rgb(0, 0, 70);
  font-style: italic;
  line-height: 120px;
  padding-left: 20px;
}

header .user-drop-list {
  position: absolute;
  right: 20px;
  top: -20px;
  left: auto;
}

.imgBar {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  overflow: hidden;
}
.imgBar img {
  height: 100%;
  width: 100%;
}

.container {
  background-color: rgba(255, 255, 255, 0.5);
  height: 100vh;
  padding-top: 10px;
}

.searchArea {
  display: flex;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.btns {
  margin-top: 15px;
}

table {
  margin-top: 10px;
  width: 100%;
  background-color: rgb(199, 199, 199);
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

tbody tr:nth-child(2n+1) {
  background-color: rgb(228, 228, 228);
}

tbody tr:hover {
  background-color: rgb(255, 255, 255);
}

tr {
  height: 50px;
}

tr td {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

thead {
  font-weight: bold;
}
</style>
